<template>
	<div class="bankList">
		<div class="header">
			<img @click="back" src="../../assets/nav_back.png"/>
			<span>我的银行卡</span>
			<span class="img"></span>
		</div>
		<div class="inner">
			<div class="bank" :class="background(bank.bankCode)"  v-for="bank in banklist">
				<img :src="banImg(bank.bankCode)"/>
				<div class="right">
					<p class="bankName"><span class="bankinner">{{bank.bankName}}</span> <span class="make" @click="mBank(bank.id)">管理</span></p>
					<span class="bankType">储蓄卡</span>
					<span class="bankNum">{{bank.bankNo | toDot}}</span>
				</div>
			</div>
			<div class="addbank" @click="add" v-show="banklist.length<3"><!---->
				<img src="../../assets/select_card_add.png"/>
				<span>添加银行卡</span>
			</div>
			<p style="color:#56627C; font-size: @f24; text-align: center; margin-top: .3rem;">最多可添加3张银行卡</p>
		</div>
		
		 <!--模态框-->
	    <div class="model" v-show="flag">
	      <div class="inner">
	        <div class="tc photo-choose" @click="delBank(dCode)">
	          <p>删除银行卡</p>
	        </div>
	        <div class="tc photo-cancel" @click="hidden">
	          <p>取消</p>
	        </div>
	      </div>
	    </div>
		
		
		
		
	</div>
</template>

<script>
	import my from '@/api/my/index'
	import { toast } from '@/util/index'
	import { Toast} from 'mint-ui'
	export default{
		data(){
			return{
				code:123123,
				banklist:[],
				flag:false,
				dCode:"",
				
			}
		},
		methods:{
			background(num){
				//console.log(num);
				if(num=="CEB"|| num=="BOS"){
					return "yellow"
				}else if(num=="CIB"||num=="SPDB"||num=="CCB"||num=="BOCOM"){
					return "blue"
				}else if(num=="CMBC"||num=="PSBC"||num=="ABC"){
					return "green"
				}else{
					return ''
				}
			},
			mBank(code){
				this.dCode=code;
				this.flag=true;
				
			},
			hidden(){
				this.flag=false;
			},
			box(){
				
				let instance = Toast('银行卡已删除');
					setTimeout(() => {
					  	instance.close();
				}, 2000);
			},
			delBank(code){
				let senddata = {
					userId:window.localStorage.getItem("token"),
					bankCardId:this.dCode,
					plat:"mlj"
				}
			
				my.delBankCard(senddata).then((res) => {
					if (res.data.code == 200) {
						  	this.flag=false;
							this.initData();
							this.box();
					}else if(res.data.code == 103) {//没有实名认证跳转 认证页面
	                    this.$router.push({path:'/realnameInfo'})
	                }else if(res.data.code==222){
			            this.$router.push({path:'/login'})
			        } else {
						toast(res.data.message)
					}
				})
			
			},
			
			banImg(num){
				if(num=="CCB"){
					return require("../../assets/Banklogo/bank7.png")
				}else if(num=="CMB"){
					return require("../../assets/Banklogo/bank10.png")
				}else if(num=="PSBC"){
					return require("../../assets/Banklogo/bank11.png")
				}else if(num=="BOCOM"){
					return require("../../assets/Banklogo/bank4.png")
				}else if(num=="CITIC"){
					return require("../../assets/Banklogo/bank17.png")
				}else if(num=="CIB"){
					return require("../../assets/Banklogo/bank13.png")
				}else if(num=="SPDB"){
					return require("../../assets/Banklogo/bank8.png")
				}else if(num=="GDB"){
					return require("../../assets/Banklogo/bank5.png")
				}else if(num=="ABC"){
					return require("../../assets/Banklogo/bank3.png")
				}else if(num=="ICBC"){
					return require("../../assets/Banklogo/bank2.png")
				}else if(num=="BOC"){
					return require("../../assets/Banklogo/bank1.png")
				}else if(num=="CEB"){
					return require("../../assets/Banklogo/bank19.png")
				}else{
					return require("../../assets/Banklogo/bank0.png")
				}
			},
			back() {
				this.$router.back(-1)
			},
			add(){
				this.$router.push({path:'/addCard'})
			},
			initData(){
				let senddata = {
					userId:window.localStorage.getItem("token"),
					plat:"mlj"
				}
			
				my.bankJson(senddata).then((res) => {
					if (res.data.code == 200) {
						this.banklist=res.data.data;
					}else if(res.data.code == 103) {//没有实名认证跳转 认证页面
	                    this.$router.push({path:'/realnameInfo'})
	                } else {
						toast(res.data.message)
					}
				})
			}
		},
		filters:{
			toDot(val){
				 return val.substr(0,4)+" **** **** "+val.substr(-4);
			}
		},
		mounted(){
			this.initData();
		},
		 beforeRouteEnter(to,from,next){
		    document.querySelector('title').innerText='谋略家'
		      next()
		  }
	}
</script>

<style lang="less" scoped>
@import '../../less/config.less';	
	.bankList{
		.header{
			padding:0 @p30;
			display: flex;
			justify-content:space-between;
			align-items: center;
			height:@hwrap;
			color:#fff;
			font-size:.48rem;
			background: #000000;
			img,.img{
				width: @p30;
				height: @p30;
			}
		}
		.inner{
			background: @bgColor;
			padding: 0 @p30;
			.bank{
				padding-left: 2*@fsize;
				width: 9.2rem;
				height: 3.2rem;
				background: #ef6d74;
				border-radius: @fsize;
				margin-top: @p30;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				img{
					width: 1.0133rem;
					height: 1.0133rem;
					border: 0.08rem solid #FFFFFF;
			        padding: 0.08rem;
			        background: #fff;
			        border-radius: 1.0133rem;
				}
				.right{
					margin-left: @p30;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: flex-start;
					.bankName{
						font-size: 0.48rem;
						color: white;
						.bankinner{
							width: 5.4rem;
							height: auto;
							display: inline-block;
						}
						.make{
							display: inline-block;
							width: 1.173rem;
							height: 0.533rem;
							line-height:  0.533rem;
							text-align: center;
							border: 1px solid #FFFFFF;
							border-radius: 6px;
							font-size: @f26;
						}
					}
					.bankType{
						font-size: @f24;
						color: white;
					}
					.bankNum{
						font-size: 0.48rem;
						color: white;
						margin-top: .5rem;
					}
					
				}
			}
			.yellow{
				background: #efc400;
			}
			.blue{
				background:#578cce;
			}
			.green{
				background: #4bbe88;
			}
			.addbank{
				width: 9.2rem;
				height: 3.2rem;
				border-radius: @fsize;
				border: 2px dashed @placeColor;
				margin-top: @p30;
				box-sizing: border-box;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				color: #56627c;
				img{
					width: 0.64rem;
					height: 0.64rem;
				}
				span{
					margin-top: @f34;
					font-size: 0.48rem;
				}
				
			}
			
		}
		.model{
			position: absolute;
			width: 100%;
			height: 100%;
			bottom: 0;
			
			.inner {
		        width: 100%;
		        padding: 0.21rem 0.4rem;
		        position: fixed;
		        bottom: 0;
		        box-sizing: border-box;
		      }
		      .photo-choose,
		      .photo-cancel {
		        border-radius: 0.24rem;
		        line-height: 1.4rem;
		        background-color: #fff;
		        font-size: 0.48rem;
		        color:red;
		        text-align: center;
		      }
		      .photo-cancel {
		        margin-top: 0.2rem;
		      }
		}
	}
	
	


</style>